<template>
	<view>
		<nav-header title="运财宝">
			<template v-slot:right>
				<text @tap="save">保存</text>
			</template>
		</nav-header>
		<!-- <up-tabs :list="fullTabList" @change="changeTab"></up-tabs> -->

		<view class="edit">
			<uni-forms :modelValue="form" ref="form" :rules="rules">
				<view class="input-title">
					<view class="title">
						<text class="text-sm-Medium">流动显示牌</text>
						<text class="text-sm-Regular">{{ SumTitle }}/50</text>
					</view>
					<uni-forms-item name="title">
						<view class="mt">
							<uni-easyinput placeholder="请输入流动显示牌" border="bottom" v-model="form.title" maxlength="50"
								:clearable="false" :inputBorder="false" @input="countTitle" />
						</view>
					</uni-forms-item>
				</view>
				<view class="input-content">
					<view class="title">
						<text class="text-sm-Medium">内容</text>
						<text class="text-sm-Regular"
							v-show="form.type != 2 && form.type != 3">{{ SumContent }}/300</text>
					</view>
					<!-- <view class="buttonList">
						<view v-for="(item, index) in buttonList" :key="index" @tap="changeButton(item.type)">
							<button :class="form.type == item.type ? 'selectbtn' : 'noselectbtn'">
								<text class="text-xs-Medium">{{item.text}}</text>
							</button>
						</view>
					</view> -->
					<view class="buttonList">
						<view v-for="(item, index) in buttonList" :key="item.type" class="draggable-item">
							<!-- 排序手柄（仅在排序模式下显示） -->
							<view v-if="isSortingMode" class="sort-handle">
								<view :class="item.order==4?'arrow-up':''">
									<up-icon name="arrow-up" v-if="index!=0" size="16" @click="moveUp(index)"></up-icon>
								</view>
								<view :class="item.order==0?'arrow-down':''">
									<up-icon name="arrow-down" v-if="index!=4" size="16"
										@click="moveDown(index)"></up-icon>
								</view>
							</view>

							<!-- 按钮主体 -->
							<button :class="form.type == item.type ? 'selectbtn' : 'noselectbtn'"
								@click="changeButton(item.type)">
								<text class="text-xs-Medium">{{item.text}}</text>
							</button>
						</view>
					</view>
					<!-- 在排序管理区域添加保存按钮 -->
					<view class="sort-manager">
						<button :class="isSortingMode ? 'selectbtn' : 'noselectbtn'" @click="toggleSortControls">
							<text class="text-xs-Medium">调整排序</text>
						</button>
						<button :class="!isSortingMode ? 'selectbtn' : 'noselectbtn'" @click="saveSortConfig"
							v-if="isSortingMode">
							<text class="text-xs-Medium">保存排序</text>
						</button>
					</view>
					<uni-forms-item name="content">
						<view>
							<view v-if="form.type == 0">
								<uni-easyinput type="textarea" placeholder="请输入内容" border="bottom" v-model="form.content"
									maxlength="300" :inputBorder="false" :clearable="false" @input="countContent">
									<template v-slot:right>
									</template>
								</uni-easyinput>
								<view class="title" style="margin-top: 24rpx;">
									<text class="text-sm-Medium">图片</text>
									<text class="text-sm-Regular">{{ pictures.length }}/12</text>
								</view>
								<view class="imgList">
									<view v-for="(it, index) in pictures" :key="index">
										<view class="img-container">
											<img :src="it" alt="" class="pimg" @click="previewImage(index)">
											<view class="imgclose"><up-icon name="close-circle-fill" size="19"
													@click="deleteImg(index)"></up-icon></view>
										</view>
									</view>
									<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9"
										v-if="pictures.length<12">
										<view class="pic-add">
											<view class="box">
												<svg-icon icon="plus" :width="48"></svg-icon>
												<text class="text-xs-Regular">上传照片</text>
											</view>
										</view>
									</image-upload>
								</view>
							</view>
							<view style="display: flex;align-items: center;height: 88rpx;" v-if="form.type == 1">
								<text>HTTPS://</text>
								<uni-easyinput placeholder="请输入网址" :inputBorder="false" v-model="form.link"
									maxlength="300" :clearable="false" @input="countContent">
								</uni-easyinput>
							</view>
							<!-- <view v-if="form.type == 2" style="width: 200rpx;margin-top: 20rpx;height: 68rpx;"> -->
							<!-- #ifndef MP-WEIXIN -->
							<!-- <up-tag text="跳转群介绍" plain
									@tap="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)"></up-tag> -->
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<!-- <text
									style="border: 1rpx solid #3c9cff;color: #3c9cff;padding: 6rpx 20rpx;border-radius: 6rpx;"
									@tap="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)">跳转群介绍</text> -->
							<!-- #endif -->
							<!-- </view> -->
							<view style="display: flex;align-items: center;height: 88rpx;" v-if="form.type == 4">
								<text>小程序appId:</text>
								<uni-easyinput placeholder="请输入要跳转的小程序appId" :inputBorder="false" v-model="form.appId"
									maxlength="18" :clearable="false">
								</uni-easyinput>
							</view>
							<view v-if="form.type == 5">
								<text>请前往后台添加数据</text>
							</view>
							<view v-if="form.type == 6">
								<text>开发中，敬请期待</text>
							</view>
							<view v-if="form.type==3" class="richtext">
								<view class="title">
									<text class="text-sm-Medium">图片</text>
									<text class="text-sm-Regular">{{ pictures.length }}/9</text>
								</view>
								<view class="imgList" style="margin-bottom: 24rpx;">
									<view v-for="(it, index) in pictures" :key="index">
										<view class="img-container">
											<img :src="it" alt="" class="pimg" @click="previewImage(index)">
											<view class="imgclose"><up-icon name="close-circle-fill" size="19"
													@click="deleteImg(index)"></up-icon></view>
										</view>
									</view>
									<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9"
										v-if="pictures.length<9">
										<view class="pic-add">
											<view class="box">
												<svg-icon icon="plus" :width="48"></svg-icon>
												<text class="text-xs-Regular">上传照片</text>
											</view>
										</view>
									</image-upload>
								</view>
								<piaoyiEditor :values="values" :maxlength="3000" @changes="saveContens"
									:readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name" />
								<!-- <view class="">
										{{form.content}}
									</view> -->
							</view>
						</view>
					</uni-forms-item>

				</view>

			</uni-forms>
		</view>

		<view class="history">
			<text class="title" v-if="historyList.length>0">历史修改：</text>
			<pop-menu :items="menuItems" @select="onSelectMenu">
				<view class="board" v-for="(item,index) in historyList" :key="item.id" @tap="openModal(item.id)"
					@longpress="onLongPress(item)">
					<view class="content">
						<view class="fc">
							<text class="tip">流动显示牌：</text><text class="sub-title">{{ item.title }}</text>
						</view>
						<view class="fc">
							<text class="tip">内容：</text>
							<!-- #ifndef MP-WEIXIN -->
							<text class="context" v-if="item.type == 2">
								<up-tag text="跳转群介绍" plain
									@tap="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)"></up-tag>
							</text>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view v-if="item.type == 2">
								<text
									style="border: 1rpx solid #3c9cff;color: #3c9cff;padding: 6rpx 20rpx;border-radius: 6rpx;"
									@tap.native.stop="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)">跳转群介绍</text>
							</view>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<text class="context" v-else-if="item.type==3">
								<view v-html="item.content"></view>
							</text>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<view class="context" v-else-if="item.type==3">
								<view v-html="item.content"></view>
							</view>
							<!-- #endif -->
							<text class="context" v-else>{{ item.content }}</text>
						</view>
						<view class="fc">
							<text class="tip">修改人：</text>
							<view class="fs tip">
								<text>{{ item.createNickName }}</text>
								<text>{{ item.createTime }}</text>
							</view>
						</view>
					</view>
					<view class="tag">
						<up-tag text="当前" :show="index==0" disabled></up-tag>
					</view>

					<up-modal :show="showModalId === item.id" showCancelButton @cancel="showModalId = null"
						@confirm="confirm(item)" cancel-text="关闭" confirmText="粘贴到表单" confirmColor="#2970FF"
						buttonReverse>
						<!-- 点击后的弹出窗 -->
						<view class="slot-content">
							<view class="content">
								<view class="fc">
									<text class="tip">流动显示牌：</text><text style="flex: 1;">{{ item.title }}</text>
								</view>
								<view class="fc">
									<text class="tip">内容：</text>
									<!-- #ifndef MP-WEIXIN -->
									<text style="flex: 1;" v-if="item.type == 2">
										<up-tag text="跳转群介绍" plain
											@tap="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)"></up-tag>
									</text>
									<!-- #endif -->
									<!-- #ifdef MP-WEIXIN -->
									<view style="flex: 1;" v-if="item.type == 2">
										<text
											style="border: 1rpx solid #3c9cff;color: #3c9cff;padding: 6rpx 20rpx;border-radius: 6rpx;"
											@tap="goPage(`/pageSubOne/group/group-introduction?id=${form.groupId}`)">跳转群介绍</text>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<text style="flex: 1;" v-if="item.type==3">
										<view v-html="item.content"></view>
									</text>
									<!-- #endif -->
									<!-- #ifdef MP-WEIXIN -->
									<view style="flex: 1;" v-if="item.type==3">
										<view v-html="item.content"></view>
									</view>
									<!-- #endif -->
									<text
										style="flex: 1;word-break: break-word;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;"
										v-else>{{ item.content }}</text>
								</view>
								<view class="fc" v-if="item.pictures.length>0">
									<text class="tip">图片：</text>
									<view class="grid-item">
										<view v-for="(item,index) in item.pictures">
											<img :src="item" style="width: 100rpx;height: 100rpx;" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</up-modal>
				</view>
			</pop-menu>
		</view>
	</view>
</template>

<script>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		data() {
			return {
				form: {
					title: "",
					content: "",
					link: "",
					groupId: null,
					type: null,
				},
				// fullTabList: [
				// 	{
				// 		name: '公告',
				// 	}, {
				// 		name: '商品橱窗',
				// 	}
				// ],
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请填写标题',
						}, ],
					},
					// content: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写内容',
					// 	}, ],
					// }
				},
				pageNum: 1,
				SumTitle: 0,
				SumContent: 0,
				showModalId: null,
				content: '', // 存储编辑器内容
				// buttonList: [{
				// 		text: "文本",
				// 		type: 0,
				// 		order: 0
				// 	},
				// 	{
				// 		text: "链接",
				// 		type: 1,
				// 		order: 1
				// 	},
				// 	// {
				// 	// 	text: "群介绍"
				// 	// },
				// 	{
				// 		text: "小程序",
				// 		type: 4,
				// 		order: 2
				// 	},
				// 	{
				// 		text: "富文本",
				// 		type: 3,
				// 		order: 3
				// 	}
				// ],
				buttonList: [{
						text: "文本",
						type: 0,
						order: 0
					},
					{
						text: "商品窗",
						type: 5,
						order: 1
					},
					// {
					// 	text: "群介绍"
					// },
					{
						text: "小程序",
						type: 4,
						order: 2
					},
					{
						text: "链接",
						type: 1,
						order: 3
					},
					{
						text: "本地生活",
						type: 6,
						order: 4
					}
				],
				// 新增排序状态
				isSortingMode: false, // 控制是否显示排序手柄
				historyList: [],
				pictures: [],
				selectedItem: null, // 用于存储当前长按的项目
				readOnly: false, //是否只读
				photoUrl: 'https://file.dgyxy.com/resource', //服务器图片域名或者ip
				api: '/upload', //上传图片接口地址
				txt: '',
				name: 'file',
				values: ''
			}
		},
		components: {
			piaoyiEditor
		},
		computed: {
			menuItems() {
				let items = [];

				items.push({
					key: 'DELETE',
					name: '删除',
					icon: 'trash',
					// color: '#e64e4e'
				});
				return items;
			},
		},
		methods: {
			toggleSortControls() {
				this.isSortingMode = !this.isSortingMode
			},
			// 上移按钮位置
			moveUp(index) {
				if (index > 0) {
					[this.buttonList[index], this.buttonList[index - 1]] = [this.buttonList[index - 1], this.buttonList[
						index]];
					// this.updateOrderValues();
					console.log(this.buttonList)
				}
			},

			// 下移按钮位置
			moveDown(index) {
				if (index < this.buttonList.length - 1) {
					[this.buttonList[index], this.buttonList[index + 1]] = [this.buttonList[index + 1], this.buttonList[
						index]];
					// this.updateOrderValues();
					console.log(this.buttonList)
				}
			},
			// updateOrderValues(){
			// 	console.log(this.buttonList)
			// 	this.buttonList.forEach((item, index) => {
			// 		item.order = index;
			// 	});
			// 	console.log(this.buttonList)
			// },
			saveSortConfig() {
				// this.updateOrderValues();
				const groupBoardOrder = this.buttonList.map(item => item.order);
				let data = {
					groupId: this.form.groupId,
					groupBoardOrder: groupBoardOrder
				}
				console.log(data)
				this.$http({
					url: "/group/config/save",
					method: "POST",
					data: data
				}).then((data) => {
					uni.showToast({
						title: "保存成功",
						icon: "none"
					})
					this.isSortingMode = !this.isSortingMode
				});
				console.log(this.buttonList)
			},
			// 图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.pictures,
					current: index
				});
			},
			// 删除图片
			deleteImg(index) {
				for (let i = this.pictures.length - 1; i >= 0; i--) {
					if (i === index) {
						this.pictures.splice(index, 1)
					}
				}
			},
			// 图片上传
			onUnloadImageSuccess(file, res) {
				this.pictures.push(res.data.originUrl)

			},
			onLongPress(item) {
				this.selectedItem = item;
				console.log(this.selectedItem)
			},
			onSelectMenu(item) {
				if (item.key == "DELETE") {
					uni.showModal({
						title: '删除运财宝',
						content: '确认删除该运财宝记录?',
						success: (res) => {
							if (!res.cancel) {
								this.$http({
									url: `/group/board/${this.selectedItem.id}`,
									method: "DELETE"
								}).then((data) => {
									console.log(data)
									// 从当前页的列表中移除被删除的项目
									this.historyList = this.historyList.filter(item => item.id !== this
										.selectedItem.id);
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
									// 重置选中项
									this.selectedItem = null;
								})
							}
						}
					})
				}
			},
			goIntr() {
				uni.navigateTo({
					url: `/pageSubOne/group/group-introduction?id=${this.form.groupId}`
				})
			},
			saveContens(e) {
				this.form.content = e.html
			},
			save() {
				this.$refs.form.validate().then(res => {
					if (this.form.type == 1) {
						this.form.content = this.form.link
					} else if (this.form.type == 4) {
						this.form.content = this.form.appId
					}
					this.form.content = this.form.type != 2 && this.form.content || ""
					if (this.pictures.length > 12) {
						uni.showToast({
							title: "超过图片上传数量,请重新上传",
							icon: "none"
						})
						return
					}
					this.form.pictures = this.pictures
					console.log(this.pictures)
					this.$http({
						url: `/group/board`,
						method: 'POST',
						data: this.form
					}).then((data) => {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						this.$forceUpdate();
						this.getList()
						this.initForm()
						this.triggerRefresh()
					});
				}).catch(err => {
					uni.showToast({
						title: "输入有误",
						icon: "none"
					})
				})
			},
			// 刷新运财宝
			triggerRefresh() {
				// 触发刷新事件
				uni.$emit('refreshBoard')
			},
			countTitle(e) {
				this.SumTitle = e.length
			},
			countContent(e) {
				this.SumContent = e.length
			},
			changeButton(index) {
				this.form.type = index
				if (this.form.type == 1) {
					this.SumContent = this.form.link.length
				} else {
					this.SumContent = this.form.content.length
				}
			},
			openModal(id) {
				this.showModalId = id
			},
			initForm() {
				this.form.title = ""
				this.form.content = ""
				this.form.link = ""
				this.form.appId = ""
				this.form.type = null
				this.form.groupId = null
				this.pictures=[]
			},
			confirm(item) {
				this.initForm()
				this.form.title = item.title
				if (item.type == 1) {
					this.form.link = item.content || ""
				} else if (item.type == 4) {
					this.form.appId = item.content || ""
				} else {
					this.form.content = item.type != 2 && item.content || ""
				}
				this.form.groupId = item.groupId
				this.pictures = item.pictures
				this.form.type = item.type
				this.SumTitle = this.form.title.length
				this.SumContent = this.form.content.length
				this.values = item.content
				this.showModalId = null
			},
			getList() {
				this.$http({
					url: `/group/board/list`,
					method: 'GET',
					data: {
						groupId: this.form.groupId,
						pageNum: this.form && this.form.pageNum || 1,
						pageSize: this.form && this.form.pageSize || 10
					}
				}).then((res) => {
					console.log('res',res)
					this.historyList = res.list.filter(item => item.type !== 5);
					// this.historyList = res.list
					// this.historyList = res.list.map(item => ({ ...item, groupId: this.form.groupId }));
				});

				this.$http({
					url: `/group/config/${this.form.groupId}`,
					method: "GET"
				}).then((res) => {
					this.buttonList = res.groupBoardOrder.map(index => this.buttonList[index]);
					this.form.type=this.buttonList[0].type
				})
			}
		},
		onLoad(options) {
			this.form.groupId = options.id
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.edit {
		padding: 24rpx 32rpx;
		
		:deep(.uni-easyinput__content.is-textarea) {
			// height: 40rpx;
			padding: 10rpx 24rpx;
			background-color: $gray-100 !important;
			height: 400rpx;
		}
		
		:deep(.uni-easyinput__content-textarea){
			height: 340rpx;
		}

		.sort-manager {
			display: flex;
			align-items: center;
			justify-content: center;
			// flex-direction: column;
			gap: 24rpx;
			margin-bottom: 24rpx;

			.selectbtn {
				width: 160rpx;
				height: 60rpx;
				line-height: 50rpx;
				border-radius: 50rpx;
				background-color: $brand-500;
				color: $white;
			}

			.noselectbtn {
				width: 160rpx;
				height: 60rpx;
				line-height: 50rpx;
				border-radius: 50rpx;
				border: 1rpx solid $brand-500;
				color: $brand-500;
			}
		}

		.buttonList {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			gap: 40rpx;
			margin-bottom: 10rpx;

			/* 新增样式 */
			.draggable-item {
				position: relative;
				margin-bottom: 20rpx;
			}

			.sort-handle {
				position: absolute;
				right: -36rpx;
				bottom: -15rpx;
				// transform: rotate(90deg);
				// transform: translateY(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;

				.arrow-up {
					/* #ifndef MP-WEIXIN */
					margin-top: -60rpx;
					/* #endif */
				}

				.arrow-down {
					/* #ifndef MP-WEIXIN */
					margin-top: -80rpx;
					/* #endif */
				}
			}

			.sort-handle up-icon {
				margin: 2rpx 0;
			}

			// /* 隐藏原生按钮边框 */
			// button.selectbtn, button.noselectbtn {
			//   border: none !important;
			// }

			button {
				padding: 8rpx 12rpx;
				line-height: 30rpx;
				border-radius: 34rpx;
			}

			.selectbtn {
				width: 140rpx;
				background-color: $brand-500;
				color: $white;
			}

			.noselectbtn {
				width: 140rpx;
				border: 1rpx solid $brand-500;
				color: $brand-500;
			}
		}

		.input-title {
			:deep(.uni-forms) {
				height: 88rpx;
			}

			:deep(.uni-easyinput__content-input) {
				height: 40rpx;
				padding: 24rpx 32rpx !important;
				background-color: $gray-100;
			}
		}

		.input-content {
			:deep(.uni-forms) {
				height: 88rpx;
			}

			:deep(.uni-easyinput__content-input) {
				height: 40rpx;
				padding: 24rpx 32rpx !important;
				background-color: $gray-100;
			}

			:deep(.uni-forms-item.is-direction-left) {
				margin-bottom: 0;
			}

			.imgList {
				display: grid;
				/* #ifndef APP-PLUS */
				grid-template-columns: repeat(auto-fill, minmax(111px, 1fr));
				/* #endif */
				/* #ifdef APP-PLUS */
				grid-template-columns: repeat(auto-fill, minmax(222rpx, 1fr));
				/* #endif */
				gap: 8rpx;
				margin-top: 24rpx;
			}

			.img-container {
				position: relative;

				.pimg {
					width: 222rpx;
					height: 222rpx;
					position: relative;
				}

				.imgclose {
					position: absolute;
					top: -20rpx;
					left: 200rpx;
					z-index: 100;
				}
			}

			.pic-add {
				background-color: $gray-100;
				width: 222rpx;
				height: 222rpx;
				border-radius: 16rpx;
				grid-row: span 1;
				/* 确保上传按钮占据一个单元格 */

				.box {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					gap: 16rpx;
				}
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			text:first-child {
				color: $gray-900;
			}

			text:last-child {
				color: $gray-400;
			}
		}
	}

	:deep(.u-tag) {
		cursor: auto;
	}

	.history {
		padding: 30rpx;

		.title {
			color: #878787;
			font-size: 30rpx;
		}

		.board {
			margin-top: 20rpx;
			border: 1rpx solid #F0F0F0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;

			.tag {
				position: absolute;
				top: 0;
				right: 0;
			}

			:deep(.u-modal__content) {
				display: block;
			}

			.content {
				padding: 0 20rpx 20rpx 20rpx;
				font-size: 30rpx;

				.tip {
					color: #5d5d5d;
					width: 180rpx;
					text-align: right;
				}

				.sub-title {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;
				}

				.fc {
					display: flex;
					margin-top: 20rpx;
				}

				.grid-item {
					flex: 1;
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(100rpx, 1fr));
					text-align: center;
				}

				.fs {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.context {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
					flex: 1;
				}
			}
		}
	}
</style>